<!DOCTYPE html>
<html>

<!--包含头部-->
{include file='head'}


<section class="rt_wrap content mCustomScrollbar">
    <div class="rt_content">
        <div class="page_title">
            <h2 class="fl">添加会员</h2>
            <a href="adjust_funding.html" class="fr top_rt_btn money_icon">资金管理</a>
        </div>

        <!--添加会员的信息-->
        <ul class="ulColumn2">

            <form action="upload" method="post" enctype="multipart/form-data" name="fm1">
            <li>
                <span class="item_name" style="width:120px;">上传头像：</span>
                <label class="uploadImg">
                    <input type="file" id="pic" name="img"/>
                    <span>上传头像</span>
                </label>
                <input type="submit" class="link_btn" value="上传头像">
            </li>
            </form>

            <li>
                <span class="item_name" style="width:120px;">会员名称：</span>
                <input type="text" class="textbox textbox_225"  placeholder="会员账号..." name="username" maxlength="20"/>
                <span class="tips"></span>
            </li>
            <li>
                <span class="item_name" style="width:120px;">登陆密码：</span>
                <input type="password" class="textbox textbox_225"  placeholder="会员密码..." name="password" maxlength="20"/>
                <span class="tips"></span>
            </li>
            <li>
                <span class="item_name" style="width:120px;">会员等级：</span>
                <select class="select" id="sel0" name="level">
                    <option value="0">会员等级</option>
                    {foreach $userLevel as $lev}
                    <option value="{$lev['level_id']}">{$lev['level_name']}</option>
                    {/foreach}
                </select>
                <span class="tips2"></span>
            </li>
            <li>
                <span class="item_name" style="width:120px;">电子邮箱：</span>
                <input type="email" class="textbox textbox_225"  placeholder="电子邮件地址..." name="email" maxlength="50"/>
                <span class="tips"></span>
            </li>
            <li>
                <span class="item_name" style="width:120px;">手机号码：</span>
                <input type="tel" class="textbox textbox_225" placeholder="手机号码..." name="phone" maxlength="12"/>
                <span class="tips"></span>
            </li>
            <li>
                <span class="item_name" style="width:120px;">可用资金：</span>
                <input type="text" class="textbox textbox_225" value="" placeholder="可用资金（单位：元）..." readonly/>
                <span>元</span>
            </li>
            <!--<li>
             <span class="item_name" style="width:120px;">冻结资金：</span>
             <input type="text" class="textbox textbox_225" value="100.00" placeholder="冻结资金（单位：元）..." readonly/>
             <span>元</span>
            </li>-->
            <li>
                <span class="item_name" style="width:120px;">收货地址：</span>
                <select class="select" id="sel1">
                    <!--省级地区-->
                    <option value="-1">选择省份</option>
                    {foreach $area as $areaOne}
                        {if $areaOne['pid'] == 0}
                      <option value="{$areaOne['area_id']}">{$areaOne['area_name']}</option>
                        {/if}
                    {/foreach}

                </select>
                <select class="select" id="sel2">
                    <!--市级-->
                    <option value="-1">选择城市</option>

                </select>
                <select class="select" id="sel3">
                    <!--县级地区-->
                    <option value="0">选择区/县</option>

                </select>
                <span class="tips"></span>

            </li>
            <li>
                <span class="item_name" style="width:120px;">详细地址：</span>
                <input type="text" class="textbox textbox_295"  placeholder="详细地址..." name="place" maxlength="30"/> <span class="tips"></span><!--value="陕西省西安市未央区凤城五路旺景国际大厦"-->
                <span></span>
            </li>


            <li>
                <span class="item_name" style="width:120px;"></span>
                <input type="button" class="link_btn" value="添加" name="btn"/>
            </li>
        </ul>
    </div>
</section>
</body>
</html>
<script>

    //提交数据
    $(function () {

        //标记位
        var fName  = false;
        var fPwd   = false;
        var fLev   = false;
        var fEmail = false;
        var fPhone = false;
        var fPlace = false;

        //变量
        var $oPic   = null; //头像
        var $oName = null; //用户名的值
        var $oPwd  = null; //密码的值
        var $oLev  = null; //用户等级
        var $oPhone = null; //号码
        var $oEmail = null; //邮箱
        var $oPlace = null; //邮箱

        //三级联动变量
        var $oFid = null;   //省级
        var $oSid = null;   //市级
        var $oCid = null;   //县区
        var $addr = null;   //_省_市_县_
        var $oFval = null;
        var $oSval = null;
        var $oCval = null;
        var $allPlace = null;

        // 用户名的失去焦点事件
        $('[name=username]').blur(function () {

            //获取用户名的值, 动用正则,排除输入空字符符号
            $oName = $('[name=username]').val().replace(/(^\s*)|(\s*$)/g, "");

            //判断用户名是否为空
            if ($oName.length ==0) {
                $('.tips').eq(0).addClass('errorTips').html('用户名不得为空').css('color','red');
                fName = false;
                return false;
            }

            //判断用户名长度不超过12,汉字不超过4个, 注意js中的一个汉字占用1个字节,php中一个汉字占3个字节
            //利用正则判断汉字
            //if($oName.match( /^[\u4E00-\u9FA5]{1,}$/)){
            if($oName.match(/^[\u4e00-\u9fa5]+$/)){
                //alert('这是汉字');
                if ($oName.length  > 4 || $oName.length < 1) {
                    $('.tips').eq(0).addClass('errorTips').html('用户名应为 1~4 个汉字').css('color','red');
                    fName = false;
                    return false;
                }

            } else {
                //alert('这不是汉字');
                if ($oName.length > 12 || $oName.length < 3) {
                    $('.tips').eq(0).addClass('errorTips').html('用户名应为 3~12 位字符串').css('color','red');
                    fName = false;
                    return false;
                }
            }
            fName = true;
            //console.log(fName);
            //标记位为true才能向后台传输数据
            if (fName) {

                //ajax传输
                $.post('username',{username:$oName},success,'json');
            }

        });


        //密码失去焦点事件
        $('[name=password]').blur(function () {

            //console.log(fName);
            //使每一步逻辑关联
            if (!fName) {

                $('.tips').eq(1).addClass('errorTips').html('请先完成上一步操作').css('color','red');
                return false;
            }
            //获取密码值
            $oPwd = $('[name=password]').val().replace(/(^\s*)|(\s*$)/g, "");

            //判断密码是否为空
            if ($oPwd.length ==0) {
                $('.tips').eq(1).addClass('errorTips').html('密码不得为空').css('color','red');
                fPwd = false;
                return false;
            }

            //判断密码长度
            //利用正则判断汉字
            if($oPwd.match( /^[\u4E00-\u9FA5]{1,}$/)){

                //alert('这是汉字');
                $('.tips').eq(1).addClass('errorTips').html('密码不得为汉字').css('color','red');
                fPwd = false;
                return false;

            } else {
                //alert('这不是汉字');
                if ($oPwd.length > 12 || $oPwd.length < 3) {
                    $('.tips').eq(1).addClass('errorTips').html('密码应为 3~12 位非汉字符串').css('color','red');
                    fPwd = false;
                    return false;
                }
            }

            //判断是否为纯数字
            if (!isNaN($oPwd)) {
                $('.tips').eq(1).addClass('errorTips').html('密码不能为纯数字').css('color','red');
                fPwd = false;
                return false;
            }

            fPwd = true;
            $('.tips').eq(1).addClass('errorTips').html('密码合法').css('color','green');

        });

        ///获取用户等级
        $('#sel0').change(function() {

            //关联
            if (!fPwd) {

                $('.tips2').eq(0).addClass('errorTips').html('请先完成上一步操作').css('color','red');
                fLev = false;
                return false;
            }
            fLev = true;
            $oLev = 1;  //默认为普通会员
            $oLev = $('#sel0').val();
            $('.tips2').eq(0).addClass('errorTips').html('合法').css('color','green');
            //console.log($oLev);
        });

        //邮箱
        $('[name=email]').blur(function () {

            //关联
            if (!fLev) {

                $('.tips').eq(2).addClass('errorTips').html('请先完成上一步操作').css('color','red');
                return false;
            }

            //取值
            $oEmail = $('[name=email]').val().replace(/(^\s*)|(\s*$)/g, "");

            //判断是否为空
            if ($oEmail.length ==0) {
                $('.tips').eq(2).addClass('errorTips').html('邮箱不得为空').css('color','red');
                fEmail = false;
                return false;
            }

            //判断邮箱格式
            var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;

            if(!myreg.exec($oEmail))
            {
                /*  alert('提示\n\n请输入有效的E_mail！');
                  myreg.focus();*/
                $('.tips').eq(2).addClass('errorTips').html('邮箱格式错误').css('color','red');
                fEmail = false;
                return false;
            }

            fEmail = true;
            if (fEmail) {

                //查询邮箱是否唯一
                $.post('email',{email:$oEmail},success,'json');
            }

        });

        //手机号码
        $('[name=phone]').blur(function () {

            //关联
            if (!fEmail) {

                $('.tips').eq(3).addClass('errorTips').html('请先完成上一步操作').css('color','red');
                return false;
            }

            //取值
            $oPhone = $('[name=phone]').val().replace(/(^\s*)|(\s*$)/g, "");

            //判断是否为空
            if ($oPhone.length ==0) {
                $('.tips').eq(3).addClass('errorTips').html('手机号码不得为空').css('color','red');
                fPhone = false;
                return false;
            }

            //判断号码格式
            if(!(/^1[34578]\d{9}$/.test($oPhone))) {
                $('.tips').eq(3).addClass('errorTips').html('手机号码格式错误').css('color','red');
                fPhone = false;
                return false;
            }

            fPhone = true;
            if (fPhone) {

                //查询邮箱是否唯一
                $.post('phone',{phone:$oPhone},success,'json');
            }
        });

        /************    地址三级联动   **********************/
        //获取省级
        $('#sel1').change(function(){
            //关联
            console.log(fPhone);
            if (!fPhone) {

                $('.tips').eq(4).addClass('errorTips').html('请先完成上一步操作').css('color','red');
                return false;
            } else {
                $('.tips').eq(4).html('');
            }

            //初始化,删除指定option
            $('.city').remove();
            $('.country').remove();

            //获取省级id
            $oFid = $('#sel1').val();
            $oFval = $('#sel1 > option:selected')[0].innerText;
            //alert($oFid);
            //console.log($oFval);

            //ajax
            if ($oFid) {
                $.post('city',{fid:$oFid},success2,'json');
            }

        });

        //获取市级
        $('#sel2').change(function(){

            //初始化,删除指定option
            $('.country').remove();

            //获取市级id
            $oSid = $('#sel2').val();
            $oSval = $('#sel2 > option:selected')[0].innerText;
            //alert($oSid);
            //console.log($oSval);

            //ajax
            if ($oFid) {
                $.post('country',{sid:$oSid},success2,'json');
            }
        });

        //获取县区
        $('#sel3').change(function(){

            //获取县区id
            $oCid = $('#sel3').val();
            $oCval = $('#sel3 > option:selected')[0].innerText;
            //console.log($oCval);
            //alert($oCid);
            if ($oFid && $oSid && $oCid) {
                $('.tips').eq(4).addClass('errorTips').html('合法').css('color','green');
            }
        });

        //创建option标签,并添加内容
        function success2(data)
        {
            //console.log(data.state);
            switch (data.state) {

                //市级
                case 1:
                    //循环追加标签(整体)
                    for (var i in data.city) {

                        $('#sel2').append("<option class='city' value="+ data.city[i]["area_id"] +">"+ data.city[i]["area_name"] +"</option>");
                    }
                    break;

                //县区级
                case 2:

                    //循环追加标签(整体)
                    for (var j in data.country) {

                        $('#sel3').append("<option class='country'  value="+ data.country[j]["area_id"] +">"+ data.country[j]["area_name"] +"</option>");
                    }
                    break;
            }
        }

        /***************    地址三级联动    *******************/
        //地址
        $('[name=place]').blur(function () {

            //关联
            if (!$oFid || !$oSid || !$oCid) {

                $('.tips').eq(4).addClass('errorTips').html('请选择具体的省份/城市/县区').css('color','red');
                $('.tips').eq(5).addClass('errorTips').html('请先完成上一步操作').css('color','red');
                return false;
            }

            //取值
            $oPlace = $('[name=place]').val().replace(/(^\s*)|(\s*$)/g, "");

            //判断是否为空
            if ($oPlace.length ==0) {
                $('.tips').eq(5).addClass('errorTips').html('详细地址不得为空').css('color','red');
                fPlace = false;
                return false;
            }
            fPlace = true;
            $('.tips').eq(5).addClass('errorTips').html('详细地址').css('color','green');
        });

        //点击按钮
        $("[name=btn]").click(function(){

            if (!fPlace) {

                $('.tips').eq(5).addClass('errorTips').html('详细地址不得为空').css('color','red');
                return false;
            }

            //_省_市_县_
            $addr = '_'+ $oFid +'_'+ $oSid +'_'+ $oCid +'_';
            $allPlace = $oFval + $oSval + $oCval;
            //console.log($allPlace);
            if (!$oLev || $oLev == 0) {
                $oLev = 1;
            }
            //console.log($addr);
            //console.log(fName , fPwd, fEmail , fPhone, fPlace, fLev);

            //总体提交
            if (fName && fPwd && fEmail && fPhone && fPlace && fLev) {

                $.post('add',{pic:$oPic, username:$oName,level:$oLev, password:$oPwd, email:$oEmail, phone:$oPhone, address:$addr, place:$oPlace,allPlace:$allPlace},success,'json');
            }
        });



        //处理后台数据的回调函数
        function success(data) {

            console.log(data);

            switch (data.status) {

                //头像
                case 0 :
                    $oPic =  data.path;
                    //console.log('$oPic');
                    break;
                //用户名
                case 1:
                    if (data.add) {
                        fPwd   = false;
                        fLev   = false;
                        fEmail = false;
                        fPhone = false;
                        fPlace = false;
                        $('.tips').addClass('errorTips').html('请先完成上一步操作').css('color','red');  //不合法
                        $('.tips2').addClass('errorTips').html('请先完成上一步操作').css('color','red');  //不合法
                    }
                    $('.tips').eq(0).addClass('errorTips').html(data.tip).css('color','red');  //不合法
                    fName = false;
                    break;
                case 2:
                    $('.tips').eq(0).addClass('errorTips').html(data.tip).css('color','green');  //合法
                    fName = true;
                    break;
                //邮箱
                case 3:
                    $('.tips').eq(2).addClass('errorTips').html(data.tip).css('color','red');  //已存在
                    fEmail = false;
                    break;
                case 4:
                    $('.tips').eq(2).addClass('errorTips').html(data.tip).css('color','green');  //合法
                    fEmail = true;
                    break;
                //号码
                case 5:
                    $('.tips').eq(3).addClass('errorTips').html(data.tip).css('color','red');  //存在
                    fPhone = false;
                    break;

                case 6:
                    $('.tips').eq(3).addClass('errorTips').html(data.tip).css('color','green');  //合法
                    fPhone = true;
                    break;

                //添加失败
                case 11:
                    alert(data.tip);
                    fName  = false;
                    fPwd   = false;
                    fLev   = false;
                    fEmail = false;
                    fPhone = false;
                    fPlace = false;
                    break;

                //添加成功
                case 12:
                    alert(data.tip);
                    alert(32456564534);
                    //刷新当前页面
                    //window.location.reload();
                    break;
                case 13:
                    alert(data.tip);
                    alert(32456564534);
                    break;
                case 14:
                    alert(data.tip);
                    alert(32456564534);
                    break;

            }

        }

    });

</script>
